<template>  
    <div>  
        <div style="margin-bottom: 20px;">  
            <el-input v-model="searchQuery" placeholder="关键词搜索" style="width: 300px; margin-right: 10px;" />  
            <el-button type="primary" @click="fetchKsData">查询</el-button>  
        </div>  

        <el-table :data="paginatedData" border @selection-change="handleKsSelectionChange" style="height: 400px; width: 100%; overflow: auto;">  
            <el-table-column type="selection" width="55" />  
            <el-table-column prop="zjxm_code" v-if="false"/>  
            <el-table-column prop="zjxm_name" label="检验项目名称" />  
            <el-table-column prop="zjxm_sx_name" label="定性/定量" />  
            <el-table-column prop="zjxm_jybz" label="参数标准" />  
            <el-table-column prop="zjxm_remark" label="备注" />  
        </el-table>  

        <div style="margin-top: 10px; text-align: right;">  
            <el-button type="default" @click="resetSelection">反选</el-button>  
        </div>  

        <div style="margin-top: 20px; text-align: center;">  
            <span>共 {{ totalItems }} 条，当前第 {{ currentPage }} 页</span>  
            <el-pagination  
                @current-change="handlePageChange"  
                :current-page="currentPage"  
                :page-size="pageSize"  
                :total="totalItems"  
                layout="total, prev, pager, next, jumper"  
            />  
        </div>  

        <div style="margin-top: 20px;">  
            <el-button type="success" @click="cancelSelection">取消</el-button>  
            <el-button type="success" style="margin-left: 10px;" @click="confirmSelection">确认</el-button>  
        </div>  
    </div>  
</template>  

<script>  
import { ref, computed } from 'vue'  
import axios from 'axios'  
import { ElMessage } from 'element-plus'  

export default {  
    setup(props, { emit }) {  
        const ksTableData = ref([]);  
        const selectedIds = ref([]);  
        const searchQuery = ref('');  
        const currentPage = ref(1);  
        const pageSize = ref(5);  
        const totalItems = ref(0);  

        // 获取质检项目数据  
        const fetchKsData = () => {  
            axios.get('/api/QMS_ZJXM/GetQMS_ZJXM?state=1')  
                .then((response) => {  
                    ksTableData.value = response.data;  
                    totalItems.value = response.data.length; // 更新总条数  
                })  
                .catch((error) => {  
                    console.error('获取质检项目数据失败', error);  
                    ElMessage.error('加载质检项目数据失败，请稍后再试');  
                });  
        };  

        // 处理表格选中变化  
        const handleKsSelectionChange = (val) => {  
            selectedIds.value = val.map(item => item.zjxm_code);  
        };  

        // 过滤和分页数据  
        const paginatedData = computed(() => {  
            const filteredData = ksTableData.value.filter(item => {  
                // 优化搜索逻辑，去除不必要的重复计算  
                const searchTerm = searchQuery.value.toLowerCase();  
                return item.zjxm_code.toLowerCase().includes(searchTerm) ||  
                       item.zjxm_name.toLowerCase().includes(searchTerm) ||  
                       item.zjxm_sx_name.toLowerCase().includes(searchTerm) ||  
                       item.zjxm_jybz.toLowerCase().includes(searchTerm)||  
                       item.zjxm_remark.toLowerCase().includes(searchTerm);  
            });  

            // 计算分页数据  
            const start = (currentPage.value - 1) * pageSize.value;  
            return filteredData.slice(start, start + pageSize.value);  
        });  

        const resetSelection = () => {  
            const allIds = paginatedData.value.map(item => item.zjxm_code);  
            const newSelection = allIds.filter(id => !selectedIds.value.includes(id));  
            selectedIds.value = newSelection;  
        };  

        const confirmSelection = () => {  
            emit('selection-confirmed', selectedIds.value);  
        };  

        const cancelSelection = () => {  
            emit('cancel-selection');  
        };  

        const handlePageChange = (page) => {  
            currentPage.value = page;  
        };  

        fetchKsData();  

        return {  
            handleKsSelectionChange,  
            ksTableData,  
            selectedIds,  
            searchQuery,  
            paginatedData,  
            resetSelection,  
            confirmSelection,  
            cancelSelection,  
            currentPage,  
            pageSize,  
            totalItems,  
            handlePageChange,  
        }  
    }  
}  
</script>  

<style scoped>  
/* 添加适当的样式以匹配设计 */  
</style>